import React from 'react';
import { Button, Popconfirm } from 'antd';
import { Link } from 'react-router-dom';
import style from './index.less';

const ButtonsList = ({ buttonsConfig, params = null, className = '' }) => {
  const renderButtonsList = (buttonsConfig) => {
    const renderButton = (item, index) => {
      const { linkUrl, text, renderType, PopconfirmTitle, PopconfirmContent, clickFn } = item;
      // 有linkUrl代表是跳转按钮
      if (linkUrl) {
        return (
          <Button {...item} key={index}>
            <Link to={linkUrl}>{text}</Link>
          </Button>
        );
      }
      if (renderType === 'delete') {
        return (
          <Popconfirm
            title={PopconfirmTitle}
            content={PopconfirmContent}
            onConfirm={() => clickFn(params)}
            okText="确定"
            cancelText="取消"
          >
            <Button {...item}>删除</Button>
          </Popconfirm>
        );
      }
      return (
        <Button
          {...item}
          onClick={() => {
            clickFn(params);
          }}
          key={index}
        >
          {text}
        </Button>
      );
    };
    return (
      <div>
        {buttonsConfig &&
          buttonsConfig.length > 0 &&
          buttonsConfig.map((item, index) => {
            return renderButton(item, index);
          })}
      </div>
    );
  };
  return <div className={`${className} ${style.wrapper}`}>{renderButtonsList(buttonsConfig)}</div>;
};

export default ButtonsList;
